<template>
  <div class="search">
    <HeaderTop title="搜索"></HeaderTop>
    <form class="search-form" @submit.prevent="">
      <input
        type="text"
        class="search-input"
        placeholder="请输入美食或商家名称"
        v-model="keyword"
      />
      <input type="submit" class="search-button" value="搜索" />
    </form>
  </div>
</template>

<script>
import HeaderTop from "../../components/HeaderTop/HeaderTop"
export default {
  data() {
    return {
      keyword: "",
    }
  },
  name: "Search",
  components: { HeaderTop },
}
</script>

<style lang="less" scoped>
@import "../../common/style/mixin.less";
.search-form {
  display: flex;
  margin-top: 4.5rem;
  height: 5.9rem;
  padding: 1.2rem 0.8rem;
  background-color: #fff;
  .search-input {
    flex: 1;
    height: 3.5rem;
    border: none;
    outline: none;
    padding: 0 1rem;
    border-radius: 0.2rem;
    margin-right: 1rem;
    background-color: #f2f2f2;
    color: #444;
    font-size: 1.4rem;
    font-weight: 700;
  }
  .search-button {
    width: 6.5rem;
    height: 3.5rem;
    border: none;
    border-radius: 0.2rem;
    color: #fff;
    background-color: @theme-color;
    font-size: 1.6rem;
    font-weight: 700;
  }
}
</style>
